<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="images/chromatic_logo.png">
    <title>分类竞赛</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
        }
        /* 导航栏样式 */
        .navbar {
            background-color:#333;
            color:gold;
            display: flex;
            justify-content:right;
            align-items: center;
            padding: 10px;
        }
        .navbar a {
            color: #fff;
            text-decoration: none;
            float: right;
            font-size: large;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        /* 主页顶部样式 */
        header {
            background-color: #f2f2f2;
            display: flex;
            align-items: center;

        }
        header img {
            margin-right: 10px;
            width:75px;
            height:75px;
        }

        header h1 {
            margin: 0;
            font-size: 24px;
        }

        .title {
            flex-direction: column;
        }

        .logo, .name, .motto {
            display: inline-block;
        }

        table {
            width: 80%;
            margin: 40px auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 12px;
        }

        th {
            background-color: #f8f8f8;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        a {
            color: #0366d6;
            text-decoration: none;
        }
        /* 调整级别列宽度 */
        td.level-cell {
            width: 50px;
        }
        td.website-cell {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 媒体查询：适配手机屏幕 */
        @media (max-width: 480px) {
            h1 {
                font-size: 24px;
            }

            table {
                width: 100%;
                margin: 20px auto;
            }

            th, td {
                padding: 8px;
            }

            td.level-cell {
                width: 50%;
            }
            td.website-cell {
                width: 20%;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
    <a id="sponsor">我是主办方</a>
</nav>
<!-- 主页顶部 -->
<header>
    <img src="images/chromatic_logo.png" alt="Logo" class="logo">
    <div class="title">
        <h1 class="name">Chromatic</h1>
        <div class="motto">探索竞赛世界，释放你的潜力！</div>
    </div>
</header>
<table>
    <tr>
        <th>名称</th>
        <th>级别</th>
        <th>官网</th>
    </tr>
    <!-- 在这里使用 JavaScript 发起 Ajax 请求获取竞赛信息并循环显示 -->
    <script>
        // 获取查询参数值
        function getQueryParamValue(key) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(key);
        }

        // 示例：获取工具类字符串的值
        const subject = getQueryParamValue('subject');
        console.log(subject);
        function loadCompetitions() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', '/api/competitions_list/get-by-subject/' + subject, true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    const competitions = JSON.parse(xhr.responseText);

                    // 循环遍历竞赛数组，动态生成表格行
                    for (let i = 0; i < competitions.length; i++) {
                        const competition = competitions[i];
                        const row = document.createElement("tr");

                        const nameCell = document.createElement("td");
                        nameCell.textContent = competition.competition_name;
                        row.appendChild(nameCell);

                        const levelCell = document.createElement("td");
                        levelCell.className = "level-cell"; // 添加自定义样式类名
                        levelCell.textContent = competition.level;
                        row.appendChild(levelCell);

                        const websiteCell = document.createElement("td");
                        websiteCell.className = "website-cell"; // 添加自定义样式类名
                        const websiteLink = document.createElement("a");
                        websiteLink.href = competition.official_website;
                        websiteLink.textContent = competition.official_website;
                        websiteCell.appendChild(websiteLink);
                        row.appendChild(websiteCell);

                        document.querySelector("table").appendChild(row);
                    }
                } else {
                    console.error('请求失败：' + xhr.status);
                }
            };
            xhr.send();
        }

        // 页面加载完成后调用函数
        document.addEventListener("DOMContentLoaded", function() {

            loadCompetitions();
        });
    </script>
</table>
</body>
</html>